<template>
    <el-drawer size="50%" v-model="isShow" :destroy-on-close="true" @close="closeHandle" :close-on-press-escape="false"
        :close-on-click-modal="false" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>
        <el-button style="margin-bottom: 20px;" type="primary"
            @click="AddEditCaseByinquestRef.showAddCaseByinquest(ByinquestForm)">
            <el-icon class="me-2">
                <Plus />
            </el-icon>
            新增涉案人
        </el-button>
        <el-table max-height="400" ref="CaseByinquestTableRef" v-loading="loading" :data="CaseByinquestTables"
            show-overflow-tooltip border stripe
            :row-style="tableRowStyle">
            <el-table-column label="姓名" prop="name" />
            <el-table-column label="性别" prop="sex" />
            <el-table-column label="年龄" prop="age" />
            <el-table-column label="身份证号" prop="code" width="180" />
            <el-table-column label="类型" prop="type">
                <template #default="scope">
                    <dict-tag :options="nj_sheanren_type" :value="scope.row.type" />
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="state">
                <template #default="scope">
                    <dict-tag :options="nj_sheanren_status" :value="scope.row.state" />
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="140">
                <template #default="scope">
                    <el-button link size="small" type="primary"
                        @click="AddEditCaseByinquestRef.showEditCaseByinquest(ByinquestForm, scope.row)">
                        <el-icon class="me-1">
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button link size="small" type="primary" @click="deleteCaseByinquest(scope.row)">
                        <el-icon class="me-1">
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-button @click="isShow = false">关闭</el-button>
        </template>
    </el-drawer>
    <AddEditCaseByinquest ref="AddEditCaseByinquestRef" @getByinquestList="getCaseByinquestLists">
    </AddEditCaseByinquest>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { getCurrentInstance } from "vue";
import { createRoom, editRoom } from "@/api/Room/room.js";
import { getUserProfile } from "@/api/system/user";
import AddEditCaseByinquest from "@/components/Case_Byinquest/AddEditCaseByinquest/AddEditCaseByinquest.vue";
import { getByinquestList, getByinquestInfo, deleteByinquest } from "@/api/byinquest/byinquest";
import { number } from "echarts";

const { proxy } = getCurrentInstance()
const { nj_sex, nj_sheanren_type, nj_sheanren_status } = proxy.useDict('nj_sex', 'nj_sheanren_type', 'nj_sheanren_status')
// 是否显示抽屉
const isShow = ref(false)
const loading = ref(false)

const AddEditCaseByinquestRef = ref({})
// 抽屉标题
const title = ref('')
const ByinquestForm = ref({})
// 所属单位
const CaseByinquestTables = ref([]);

// 通知事件
const emit = defineEmits(['getCaseList'])
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: 10
})
const queryParams = ref({
    caseId: '',
})

const changeShowStatus = () => {
    isShow.value = !isShow.value
}
onMounted(() => {

})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取涉案人列表
const getCaseByinquestLists = async () => {
    loading.value = true
    await getByinquestList(queryParams.value, paging.value).then(res => {
        CaseByinquestTables.value = res.rows
        loading.value = false
    })
}
const showCaseByinquest = (data) => {
    title.value = '涉案人管理';
    queryParams.value.caseId = data.caseCaseinfoId

    ByinquestForm.value.caseId = data.caseCaseinfoId
    ByinquestForm.value.unitId = data.unitId
    ByinquestForm.value.depid = data.depid
    ByinquestForm.value.adduserId = data.adduserId
    getCaseByinquestLists()
    changeShowStatus()
}

defineExpose({ showCaseByinquest })

const deleteCaseByinquest = (row) => {
    ElMessageBox.confirm('确定删除此涉案人信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteByinquest(row.byinquestId).then(res => {
            getCaseByinquestLists()
        })
    }).catch(() => {
    });
}

const submitHandle = async () => {

}

// 关闭后的回调事件
const closeHandle = () => {
    console.log(123123)
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
h4 {
    margin: 10px 0;
}

// .el-button{margin-bottom: 20px;}</style>